<template>
  <div>
    <el-dialog
      title="选择房产"
      :append-to-body="true"
      @close="closeDio"
      :visible.sync="dialogTableVisible"
      width="1200px"
      style="padding:20px"
    >
      <el-row class="search_prod seaheaad">
        <el-col :span="6" style="margin:10px">
          <el-input v-model="title"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            :loading="$store.state.isLoading"
            type="success"
            size="small"
            @click="get_course_list(1,5)"
          >查询</el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="course_list.data"
        stripe
        header-row-class-name="head_color"
        tooltip-effect="dark"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column label="图片" min-width="80">
          <template slot-scope="scope">
            <el-image :src="scope.row.piclink" class="sucai">
              <div slot="error" class="image-slot">
                <img src="../../assets/img/productDefault.png" alt />
              </div>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column label="标题" min-width="160">
          <template slot-scope="scope">
            <div class="user_table">
              <span>房产标题：</span>
              <small>{{scope.row.title}}</small>
              <br />
              <span>房产标签：</span>
              <small>{{scope.row.sub_title}}</small>
              <p>
                <span>开发商：</span>
                <small>{{scope.row.developer}}</small>
              </p>
              <p>
                <span>物业公司：</span>
                <small>{{scope.row.property_company}}</small>
              </p>

              <p>
                <span>售楼处：</span>
                <small>{{scope.row.sales_office}}</small>
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="面积" min-width="160">
          <template slot-scope="scope">
            <div class="user_table">
              <span>最低成交价格：</span>
              <small>{{scope.row.min_price+'万' || '----'}}</small>
              <br />
              <span>最高成交价格：</span>
              <small>{{scope.row.max_price+'万' || '----'}}</small>
              <br />
              <span>占地面积：</span>
              <small>{{scope.row.floor_area+'m²' || '----'}}</small>
              <br />
              <span>建筑面积：</span>
              <small>{{scope.row.construction_area+'m²' || '----'}}</small>
              <br />
              <span>绿化率：</span>
              <small>{{scope.row.greening_rate+'%' || '----'}}</small>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="信息" min-width="160">
          <template slot-scope="scope">
            <div class="user_table">
              <span>物业特色：</span>
              <small>{{scope.row.property_features}}</small>
              <br />
              <span>主力户型：</span>
              <small>{{scope.row.main_unit}}</small>
              <br />
              <span>房屋类型：</span>
              <small>{{scope.row.property_type}}</small>
              <br />
              <span>装修情况：</span>
              <small>{{scope.row.renovation_condition}}</small>
              <br />
              <span>建筑类型：</span>
              <small>{{scope.row.building_type}}</small>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="房屋" min-width="160">
          <template slot-scope="scope">
            <div class="user_table">
              <span>产权年限：</span>
              <small>{{scope.row.property_age}}</small>
              <br />
              <span>交房时间：</span>
              <small>{{scope.row.expected_delivery | getTimeFormat2}}</small>
              <br />
              <span>车位数：</span>
              <small>{{scope.row.number_of_cars}}</small>
              <br />
              <span>规划户数：</span>
              <small>{{scope.row.planning_households}}</small>
              <br />
              <span>物业费：</span>
              <small>{{scope.row.property_costs}}/元m²</small>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button :loading="$store.state.isLoading" size="mini" @click="addShops(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="table_bottom">
          <el-col :span="24" class="tr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="course_list.all_num"
            ></el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "xz_lesson",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      default: "table"
    }
  },
  data() {
    return {
      course_list: [],
      currentPage1: 1,
      pageSize: 5,
      dialogTableVisible: this.show,
      loading: false,
      title: ""
    };
  },
  created() {},
  methods: {
    get_course_list(page, page_size) {
      this.loading = true;
      var params = {};
      params.page = page || 1;
      params.page_size = page_size || 5;
      params.title = this.title;
      params.show = 1;
      this.$api.getEstate.getEstateLists(params).then(res => {
        if (res.data.code == 200) {
          this.course_list = res.data.result;
          this.loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.loading = false;
        }
      });
    },
    addShops(row) {
      this.$emit("sendShop", row);
      this.dialogTableVisible = false;
    },
    handleSizeChange(val) {
      this.get_course_list("", val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.get_course_list(val, this.pageSize);
    },
    closeDio() {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    }
  },
  watch: {
    show(val1, val2) {
      if (val1) {
        this.get_course_list(1, this.pageSize);
      }
      console.log(val1);
      if (val1 == val2) {
        return;
      }
      this.dialogTableVisible = val1;
    }
  },
  computed: {}
};
</script>
<style lang="less" scoped>
.list_ul {
  height: 610px;
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.card_list {
  line-height: 2;
  padding: 5px 0 0 5px;
}
.price_card {
  color: red;
}
</style>
